<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never" class="cardcontainer">
        <!-- 引入题库筛选的复用组件 -->
        <subjectsscreen ref="ss" @InitData="InitData"></subjectsscreen>
        <!-- 分隔线 -->
        <el-row>
        <el-col :span="24">
          <div  class="grid-content bg-purple-dark">
            <i class="el-icon-info tubiao"></i>
            <span>数据一共{{total}} 条</span>
            </div>
        </el-col>
        </el-row>
        <!--表格  -->
        <el-table class="tablecontainer" :data="tableData" style="width: 100%">
        <el-table-column prop="number" label="试题编号" width="150"> </el-table-column>
        <el-table-column prop="subjectID" label="学科" width="110">
          <template #default="scope">
            {{changesubjectID(scope.row.subjectID)}}
          </template>
        </el-table-column>
        <el-table-column prop="catalogID" label="目录" width="110">
          <template #default="scope">
            {{changecatalogID(scope.row.catalogID)}}
          </template>
        </el-table-column>
        <el-table-column prop="questionType" label="题型" width="110">
          <template #default="scope">
            {{changequestionType(scope.row.questionType)}}
          </template>
        </el-table-column>
        <el-table-column prop="question" label="题干" width="200">
          <template #default="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <el-table-column prop="addDate" label="录入时间" width="180">
          <template #default="scope">
            {{changeaddDate(scope.row.addDate)}}
          </template>
        </el-table-column>
        <el-table-column prop="difficulty" label="难度" width="110">
          <template #default="scope">
            {{changedifficulty(scope.row.difficulty)}}
          </template>
        </el-table-column>
        <el-table-column prop="creator" label="录入人" width="110"></el-table-column>
        <el-table-column  label="操作" width="200">
          <template #default="scope">
            <el-button @click="viewFn(scope.row.id)" icon="el-icon-view" type="primary" circle plain></el-button>
            <el-button @click="$router.push({path: '/questions/new?id='+scope.row.id})" icon="el-icon-edit" type="success" circle plain></el-button>
            <el-button @click="deltableitem(scope.row.id)" icon="el-icon-delete" type="danger" circle plain></el-button>
            <el-button @click="imptableitem(scope.row.id)" icon="el-icon-check" type="warning" circle plain></el-button>
          </template>
        </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
        class="paginationcontainer"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          background
          :page-sizes="[5,10,20,50]"
          :page-size="5"
          layout=" prev, pager, next, sizes, jumper"
          :total="total">
        </el-pagination>
        <!-- 题目预览弹框 -->
        <questionpreview :tableData="tableData" :ID="ID" @closedialog="closedialog" :dialogVisible="dialogVisible"></questionpreview>
      </el-card>
    </div>
  </div>
</template>

<script>
import { Quelist, Queremove, choiceAdd } from '@/api/hmmm/questions'
import dayjs from 'dayjs'
import { difficulty, questionType } from '@/api/hmmm/constants'
export default {
  data () {
    return {
      tableData: [],
      page: 1,
      pagesize: 5,
      total: 0,
      dialogVisible: false,
      ID: ''

    }
  },
  methods: {
    // 获取初始值，进行初始的页面渲染
    InitData (Data) {
      console.log(Data)
      this.tableData = Data.data.items
      this.total = Data.data.counts
    },
    // 改变后端传过来的形式=====》难度
    changedifficulty (data) {
      if (!data) return
      return difficulty.find(item => item.value === data * 1).label
    },
    // 改变后端传过来的形式=====》题型
    changequestionType (data) {
      if (!data) return

      return questionType.find(item => item.value === data * 1).label
    },
    // 改变后端传过来的形式=====》时间
    changeaddDate (data) {
      if (!data) return

      return dayjs(data).format('YYYY-MM-DD HH:mm:ss')
    },
    // 改变后端传过来的形式=====》学科
    changesubjectID (data) {
      if (!data) return

      return this.tableData.find(item => item.subjectID === data).subject
    },
    // 改变后端传过来的形式=====》目录
    changecatalogID (data) {
      if (!data) return

      return this.tableData.find(item => item.catalogID === data).catalog
    },
    // 改变每页展示的条数
    async handleSizeChange (val) {
      const res = await Quelist({
        page: this.page,
        pagesize: val
      })
      this.tableData = res.data.items
    },
    // 改变分页数
    async handleCurrentChange (val) {
      const res = await Quelist({
        page: val,
        pagesize: this.pagesize
      })
      this.tableData = res.data.items
    },
    // 关闭题目预览弹框
    closedialog () {
      this.dialogVisible = false
    },
    // 预览题库
    viewFn (id) {
      this.dialogVisible = true
      this.ID = id
    },
    // 删除按钮
    deltableitem (id) {
      this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {}
        data.id = id
        // 调用删除接口
        await Queremove(data)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        // 重新渲染页面
        this.$refs.ss.getInitview()
      }).catch(() => {
      })
    },
    // 添加到精选
    imptableitem (id) {
      this.$confirm('此操作将该题目加入精选, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = {}
        data.id = id
        data.choiceState = '1'
        await choiceAdd(data)
        this.$message({
          type: 'success',
          message: '添加精选成功!'
        })
        // 重新渲染页面
        this.$refs.ss.getInitview()
        this.$router.push({ path: '/questions/choice' })
      }).catch(() => {
      })
    }
  }
}

</script>

<style scoped lang='scss' >
.bg-purple-dark {
    background: #f1f3f5;
    .tubiao{
      margin: 0 5px;
    }

  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    line-height: 36px;
    font-size: 14px;
    color:rgb(83, 81, 81);
  }
  .cardcontainer{
    position: relative;
    .paginationcontainer{
      position: absolute;
      bottom:0;
      right: 0;
    }
    .tablecontainer{
      margin-bottom: 40px;
    }
  }
</style>
